<template>
  <div>
    <ant-card>
      <template #content>
        <div class="topTitle">待办理请假事项</div>
        <block-bar :sourceData="sourceData" />
      </template>
    </ant-card>
    <ant-card style="margin-top:20px;">
      <template #content>
        <div class="topTitle">我的请假统计</div>
        <ant-table :columns="columns" Bsearch @handleSubmit="handleSubmit" @Reset="Reset">
          <template #search>
            <div class="conatiner">
              <a-month-picker placeholder="Select month" @change="monthPicker" />
              <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">
                <a-select-option value="jack">全部</a-select-option>
                <a-select-option value="jacks">通过</a-select-option>
                <a-select-option value="lucy">待审批</a-select-option>
                <a-select-option value="Yiminghe">驳回</a-select-option>
              </a-select>
            </div>
          </template>
        </ant-table>
      </template>
    </ant-card>
  </div>
</template>
<script lang="ts">
const AntCard = () => import("../../components/Card.vue");
const BlockBar = () => import("../../components/Chart/BaseBar/BlockBar.vue");
import moment from "moment";
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "leavel-home",
  layout: "menu",
  components: {
    BlockBar,
    AntCard
  }
})
export default class LeavelHome extends Vue {
  sourceData: any[] = [
    { label: "当天请假", 人数: 10, 天数: 30 },
    { label: "本月请假", 人数: 20, 天数: 50 },
    { label: "本学期请假", 人数: 50, 天数: 60 },
    { label: "学期请假", 人数: 100, 天数: 70 }
  ];
  columns: any[] = [
    {
      title: "标题",
      dataIndex: "title"
    },
    {
      title: "状态",
      dataIndex: "age"
    },
    {
      title: "时间",
      dataIndex: "time"
    },
    {
      title: "操作",
      dataIndex: "action",
      scopedSlots: { customRender: "action" }
    }
  ];
  handleChange(val: string) {
    console.log(val);
  }
  monthPicker(val:object){
      console.log(val,'日期');
  }
  handleSubmit() {
    console.log("搜索");
    this.$message.success("搜索成功");
  }
  Reset() {}
}
</script>
<style lang="less" scoped>
.topTitle {
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.conatiner {
}
</style>
